<template>
	<div style="width: 100%">
		<div class="menu">
			<li><el-link href="/#/data/center" :underline="false">数据资产中心</el-link></li>
			<li><el-link href="/#/data/company" :underline="false">一企一档</el-link></li>
			<li><el-link href="/#/data/park" :underline="false">一园一档</el-link></li>
			<li><el-link href="/#/data/storey" :underline="false">一楼一档</el-link></li>
		</div>
		<div class="table-admin-container" style="margin-top: 2px; display: flex; padding: 10px; margin-bottom: 80px">
			<el-row :gutter="10" style="width: 100%">
				<el-col :span="24">
					<TableSearch :search="state.tableData.search" @search="onSearch" />
				</el-col>
				<el-col :span="24">
					<div style="width: 100%; height: 210px; padding: 30px 15px; background: #fff; margin-top: 10px; float: left; display: flex">
						<div
							style="
								width: 312px;
								height: 150px;
								background: linear-gradient(90deg, #40acf7 0%, #737cff 100%);
								border-radius: 4px;
								padding: 20px;
								color: #fff;
								margin-right: 30px;
							"
						>
							<div style="font-size: 18px">我的项目</div>
							<div style="font-size: 18px; margin-top: 10px"><span style="font-size: 36px">963</span>个</div>
							<div style="margin-top: 20px">
								<el-progress :text-inside="true" :show-text="false" :stroke-width="6" :percentage="50" color="#fff" />
							</div>
						</div>
						<div
							style="
								width: 312px;
								height: 150px;
								background: linear-gradient(90deg, #ed6281 0%, #f09d5e 100%);
								border-radius: 4px;
								padding: 20px;
								color: #fff;
								float: left;
								margin-right: 30px;
							"
						>
							<div style="font-size: 18px">签约项目</div>
							<div style="font-size: 18px; margin-top: 10px"><span style="font-size: 36px">963</span>个</div>
							<div style="margin-top: 20px">
								<el-progress :text-inside="true" :show-text="false" :stroke-width="6" :percentage="50" color="#fff" />
							</div>
						</div>
						<div
							style="
								width: 312px;
								height: 150px;
								background: linear-gradient(90deg, #3db684 0%, #95cf4b 100%);
								border-radius: 4px;
								padding: 20px;
								color: #fff;
								float: left;
								margin-right: 30px;
							"
						>
							<div style="font-size: 18px">落地项目</div>
							<div style="font-size: 18px; margin-top: 10px"><span style="font-size: 36px">963</span>个</div>
							<div style="margin-top: 20px">
								<el-progress :text-inside="true" :show-text="false" :stroke-width="6" :percentage="50" color="#fff" />
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="16" style="margin-top: 10px">
					<el-card>
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">全年目标完成情况</div>
							</div>
							<div style="width: 50%; height: 550px; float: left" ref="yearLeftRef"></div>
							<div style="width: 50%; height: 550px; float: left" ref="yearRightRef"></div>
						</template>
					</el-card>
				</el-col>
				<el-col :span="8" style="margin-top: 10px">
					<el-card>
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">新续建投资占比</div>
							</div>
							<div style="width: 100%; height: 550px; float: left" ref="newRef"></div>
						</template>
					</el-card>
				</el-col>
				<el-col :span="24" style="margin-top: 10px">
					<el-card>
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">全市目标完成情况</div>
							</div>
							<div style="width: 100%; height: 550px; float: left" ref="overRef"></div>
						</template>
					</el-card>
				</el-col>
				<el-col :span="24" style="margin-top: 10px">
					<el-card>
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">全市阶段项目数量</div>
							</div>
							<div style="width: 100%; height: 550px; float: left" ref="halfRef"></div>
						</template>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<!-- <div  class="table-admin-container  layout-padding"  style="width: 400px; float: left; height: 96%;  top: 50px; ">-->
	</div>
</template>

<script setup lang="ts" name="cgjudgeLists">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getList, getListAll, del, batDel, change } from '/@/api/cgjudge/index';
import * as echarts from 'echarts';
import axios from 'axios';
import { handleTree } from '/@/utils';
import chinaMap from '../../assets/100000_full.json';

// 引入组件
const List = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/List.vue'));
const Menu = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/Menu.vue'));
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
const EditDialog = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/form/edit.vue'));
// 定义变量内容
const tableRef = ref<RefType>();
const value = ref(4);
const editRef = ref();
const yearLeftRef = ref();
const newRef = ref();
const yearRightRef = ref();
const overRef = ref();
const halfRef = ref();
const state = reactive<TableDemoState>({
	tableData: {
		// 列表数据（必传）
		data: [],
		// 表头内容（必传，注意格式）
		header: [
			{ key: 'name', colWidth: '', title: '姓名', type: 'text', isCheck: true },
			{ key: 'court', colWidth: '', title: '法院', type: 'text', isCheck: true },
			{ key: 'duties', colWidth: '', title: '职务', type: 'text', isCheck: true },
			{ key: 'phone', colWidth: '', title: '联系方式', type: 'text', isCheck: true },
			{ key: 'dutyTime', colWidth: '', title: '值班时间', type: 'text', isCheck: true },
			{ key: 'dutyAddress', colWidth: '', title: '值班地点', type: 'text', isCheck: true },
		],
		// 配置项（必传）
		config: {
			total: 0, // 列表总数
			loading: true, // loading 加载
			isButton: true,
			isBorder: false, // 是否显示表格边框
			isSerialNo: false, // 是否显示表格序号
			isSelection: true, // 是否显示表格多选
			isOperate: true, // 是否显示表格操作栏
			isAdd: 'admin:cogencgjudge:save', //新增标识
			isUpdate: 'admin:cogencgjudge:save', //修改标识
			isDelete: 'admin:cogencgjudge:del', //删除标识
			isBatchEdit: '', //批量修改标识
			isView: '',
			isBatchAdd: 'admin:cogencgjudge:batchadd', //批量导入
			isBatchDel: 'admin:cogencgjudge:batchdel', //批量导入
		},
		// 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
		search: [
			{ label: '年份', prop: 'name', placeholder: '请选择', required: false, type: 'input' },
			{ label: '月份', prop: 'court', placeholder: '请选择', required: false, type: 'input' },
		],
		// 搜索参数（不用传，用于分页、搜索时传给后台的值，`getTableData` 中使用）
		param: {
			page: 1,
			psize: 10,
		},
		//显示分页
		showpage: 1,
		// 打印标题
		printName: '数据打印',
		//列字典
		dictData: {},
	},
});

// 初始化列表数据
const getTableData = () => {
	state.tableData.config.loading = true;
	state.tableData.data = [];
	getList(state.tableData.param).then((response: any) => {
		state.tableData.data = response.data.data;
		state.tableData.config.total = response.data.total;
		state.tableData.config.loading = false;
	});
};

// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
	state.tableData.param = Object.assign({}, state.tableData.param, { ...data });
	tableRef.value.pageReset();
};
// 删除当前项回调
const onTableDelRow = (row: EmptyObjectType) => {
	return del(row.id).then(() => {
		getTableData();
		ElMessage.success(`删除法官${row.name}成功！`);
	});
};
const onTableBatchDel = (ids: string) => {
	return batDel(ids).then(() => {
		getTableData();
		ElMessage.success(`批量删除成功！`);
	});
	console.log(ids);
};
// 分页改变时回调
const onTablePageChange = (page: TableDemoPageType) => {
	state.tableData.param.page = page.page;
	state.tableData.param.psize = page.psize;
	getTableData();
};
// 拖动显示列排序回调
const onSortHeader = (data: TableHeaderType[]) => {
	state.tableData.header = data;
};

/** 新增按钮操作 */
const onTableAddRow = () => {
	editRef.value.openDialog('add');
};
/** 修改按钮操作 */
const onTableUpdateRow = (row: any) => {
	editRef.value.openDialog('edit', row);
};

// 页面加载时
onMounted(() => {
	getTableData();
	// 关联查询
	var colorList = ['#4450BB', '#5F6CE6', '#58C9F7', '#F74D4E', '#FAC231'];
	var title = ['子企业1', '子企业2', '子企业3', '子企业4', '子企业5'];
	var dataValue = ['13.43', '33.08', '35.67', '11.5', '28.84'];
	var dataList = title.map((item, index) => {
		return {
			name: item,
			value: dataValue[index],
		};
	});
	var center = ['50%', '50%'];
	var option = {
		color: colorList,
		series: [
			// 外边设置
			{
				type: 'pie',
				center: center,
				radius: ['55%', '15%'],
				itemStyle: {
					color: '#F6F7F9',
				},
				label: {
					show: true,
				},
				data: [0],
			},
			// 展示层
			{
				type: 'pie',
				center: center,
				radius: ['25%', '60%'],
				itemStyle: {
					borderWidth: 1, //描边线宽
					borderColor: '#fff',
				},
				label: {
					show: true,
					position: 'outside',
					alignTo: 'labelLine',
					backgroundColor: '#fff',
					height: 0,
					width: 0,
					lineHeight: 0,
					distanceToLabelLine: 0,
					borderRadius: 3,
					borderWidth: 1,
					borderColor: 'auto',
					padding: [3, -3, 3, -3],
					formatter: function (params) {
						return `{b|${params.value}%}\n{a|${params.name}}`;
					},
					rich: {
						a: {
							padding: [20, -80, 40, -80],
							fontSize: '12px',
							fontFamily: 'MicrosoftYaHei',
							color: '#091158',
						},
						b: {
							padding: [0, -80, 55, -80],
							fontSize: '15px',
							fontFamily: 'MicrosoftYaHei-Bold, MicrosoftYaHei',
							fontWeight: 'bold',
							color: '#001F3D',
						},
					},
				},
				labelLine: {
					show: false,
					normal: {
						length: 40,
						length2: 85,
						align: 'right',
						lineStyle: {
							width: 1,
						},
					},
				},
				data: dataList,
			},
		],
	};
	const yearLeftChart = echarts.init(yearLeftRef.value);
	yearLeftChart.setOption(option);
	const yearRigntChart = echarts.init(yearRightRef.value);
	yearRigntChart.setOption(option);
	const newChart = echarts.init(newRef.value);
	newChart.setOption(option);

	const overOption = {
		dataset: {
			source: [
				['数据1', 2],
				['数据2', 2],
				['数据3', 5],
				['数据4', 2],
				['数据5', 2],
				['数据6', 2],
				['数据7', 2],
				['数据8', 2],
				['数据9', 2],
				['数据10', 2],
				['数据11', 2],
				['数据12', 2],
				['数据13', 2],
				['数据14', 2],
				['数据15', 2],
				['数据16', 2],
				['数据17', 2],
				['数据18', 2],
				['数据19', 2],
				['数据20', 2],
				['数据21', 2],
				['数据22', 2],
				['数据23', 2],
				['数据24', 2],
			],
		},
		backgroundColor: '#fff',
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				// 坐标轴指示器，坐标轴触发有效
				type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
			},
		},
		grid: {
			left: '8%',
			right: '4%',
			bottom: '15%',
			top: '15%',
		},
		xAxis: {
			type: 'category',
			axisLine: {
				lineStyle: {
					color: '#dddddd',
				},
			},
			axisTick: {
				show: false,
				alignWithLabel: true,
				lineStyle: {
					color: '#f3f3f3',
				},
			},
			axisLabel: {
				fontSize: 14,
				textStyle: {
					color: '#666666',
					fontFamily: 'Microsoft YaHei',
				},
			},
		},

		yAxis: {
			type: 'value',
			min: 0,
			max: 5,
			axisLine: {
				show: false,
				lineStyle: {
					color: '#dddddd',
				},
			},
			data: [1, 2, 3],
			axisTick: {
				show: true,
				alignWithLabel: true,
				lineStyle: {
					color: '#dddddd',
				},
			},
			splitLine: {
				show: true,
				lineStyle: {
					type: 'dotted',
					color: '#dddddd',
					type: [6, 3],
					dashOffset: 2,
				},
			},
			axisLabel: {
				padding: [0, 5, 0, 0],
				fontSize: 14,
				textStyle: {
					color: '#666666',
					fontFamily: 'Microsoft YaHei',
				},
			},
		},
		series: [
			{
				type: 'bar',
				barWidth: 10,
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: '#3397f5',
							},
							{
								offset: 1,
								color: '#138AF2',
							},
						]),
						barBorderRadius: [4, 4, 0, 0],
					},
				},
			},
		],
	};

	const overChart = echarts.init(overRef.value);
	overChart.setOption(overOption);
	const halfChart = echarts.init(halfRef.value);
	halfChart.setOption(overOption);
});
</script>

<style scoped lang="scss">
.chain {
	width: 100%;
	height: 100%;
	padding: 10px;
	.section-level {
		width: 5%;
		height: auto;
		font-size: 18px;
		float: left;
		color: #fff;
		display: flex;
		align-items: center;
		text-align: center;
		border-radius: 6px 0px 0px 6px;
	}
	.title {
		color: #ffffff;
		padding: 10px;
		text-align: center;
		font-size: 16px;
		border-radius: 6px 6px 0px 0px;
	}
	.level_one {
		width: 49%;
		margin-top: 10px;
		margin-right: 1%;
		color: #fff;
		float: left;
		border: 0.0625rem dashed #0066cb;
		border-radius: 6px 6px 0px 0px;
		.level_two {
			margin-top: 10px;
			float: left;
			text-align: center;
			padding: 10px;
			border-radius: 6px;
		}
		.level_two:nth-child(2n + 1) {
			float: right;
		}
		.w100 {
			width: 100%;
		}
		.w50 {
			width: 49%;
		}
	}
	.blue {
		background-color: #1890ff;
	}
	.orange {
		background-color: orangered;
	}
	.grey {
		background-color: gray;
	}
	.light-blue {
		background-color: rgb(99, 193, 224);
	}
	.section-level-upstream {
		border: 0.0625rem dashed #0066cb;
		width: 40%;
		float: left;
		padding: 5px;
	}
	.section-level-midstream {
		width: 35%;
		float: left;
		padding: 5px;
		border: 0.0625rem dashed #0066cb;
	}
	.section-level-downstream {
		width: 20%;
		float: left;
		padding: 5px;
		border: 0.0625rem dashed #0066cb;
		border-radius: 0px 6px 0px 0px;
	}
}
.card-header {
	height: 35px;
	.icon {
		float: left;
		margin-right: 15px;
	}
	.title {
		font-size: 22px;
		color: #010101;
		float: left;
	}
	.remind {
		height: 16px;
		background: #ff0000;
		border-radius: 6px 6px 6px 0px;
		float: left;
		color: #ffff;
		margin-left: 10px;
		text-align: center;
		padding: 0px 5px;
		font-size: 12px;
	}
	.more {
		background-image: url('/src/assets/more.png');
		width: 16px;
		height: 14px;
		float: right;
		margin-top: 10px;
		background-size: 100% 100%;
	}
}
.menu {
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	li {
		list-style: none;
		float: left;
		width: 6.1%;
		font-size: 16px;
		line-height: 50px;
		text-align: center;
	}
}
.table-admin-container {
	.table-admin-padding {
		padding: 15px;
		.table-admin {
			flex: 1;
			overflow: hidden;
		}
	}
}
.content {
	min-height: 235px;
	li:hover {
		background-color: rgba(24, 144, 255, 0.1);
	}
	li {
		list-style: none;
		height: auto;
		line-height: 30px;
		padding: 10px 0px 10px 20px;
		.list {
			height: 30px;
			.drop-new {
				background-color: #efa151;
				float: left;
				width: 8px;
				height: 8px;
				border-radius: 3px;
				margin-top: 11px;
			}
			.topic {
				height: 22px;
				background: linear-gradient(140deg, #ff3334, #fe7527);
				border-radius: 0px 6px 0px 6px;
				float: left;
				color: #fff;
				text-align: center;
				line-height: 22px;
				font-size: 14px;
				margin-left: 10px;
				padding: 0 8px;
				margin-top: 4px;
			}
			.title {
				height: 17px;
				font-weight: 400;
				font-size: 15px;
				color: #000000;
				float: left;
				margin-left: 10px;
			}
			.time {
				color: #999999;
			}
			.score {
				float: right;
				color: #1890ff;
				margin-right: 10px;
			}
			.color {
				color: #000000;
			}
			.lh {
				line-height: 24px;
			}
			.number {
				width: 24px;
				height: 24px;
				background: linear-gradient(-49deg, #4180fb, #52aafe);
				box-shadow: 0px 6px 12px 0px rgba(44, 109, 251, 0.26);
				border-radius: 50%;
				float: left;
				text-align: center;
				line-height: 24px;
				color: #fff;
			}
			.w33 {
				width: 33%;
				float: left;
			}
			.address {
				float: right;
			}
			.name {
				text-align: center;
			}
		}
		.description {
			height: 20px;
			color: #999999;
			margin-left: 10px;
			.address {
				float: left;
				margin-left: 10px;
			}
			.line {
				float: left;
				margin-left: 10px;
			}
			.time {
				float: left;
				margin-left: 10px;
			}
		}
	}
}
.el-card {
	margin-bottom: 5px;
}
</style>
